<template>
  <div class="all">
    <el-row :gutter="0">
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-input
            blur
            clearable
            placeholder="请输入内容"
            v-model="params.query"
            class="input-with-select"
            @clear="getSearch"
            @keydown.native.enter="getSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getSearch"
            ></el-button>
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-select
            v-model="value"
            filterable
            placeholder="请选择"
            @change="Branch"
          >
            <el-option
              v-for="item in selectData"
              :key="item.enterpriseId"
              :label="item.enterpriseName"
              :value="item.enterpriseId"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <el-radio-group v-model="radio1" @change="changeState(radio1)">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="已通过"></el-radio-button>
            <el-radio-button label="已驳回"></el-radio-button>
            <el-radio-button label="待审查"></el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-button class="button1" @click="changeAllPass">
            <i class="el-icon-s-check"></i>
            <span>批量通过</span>
          </el-button>
          <el-button class="button1 button2" @click="changeAllStop">
            <i class="el-icon-s-check"></i>
            <span>批量驳回</span>
          </el-button>
          <el-button class="button3" type="primary" @click="getAdd">
            <i class="add">+</i>
            <span>新增企业动态</span>
          </el-button>
        </div>
      </el-col>
    </el-row>

    <template>
      <el-table :data="tableData" @select="changeCheckBox">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="ID" width="50"> </el-table-column>
        <el-table-column prop="enterpriseTitle" label="文章标题">
        </el-table-column>
        <el-table-column prop="enterpriseTime" label="更新时间">
        </el-table-column>
        <el-table-column prop="enterpriseHits" label="点击数">
        </el-table-column>
        <el-table-column prop="enterpriseName" label="分支企业">
        </el-table-column>
        <el-table-column prop="enterpriseStatus" label="发布状态">
        </el-table-column>
        <el-table-column prop="enterpriseAuthor" label="发布账号">
        </el-table-column>
        <el-table-column prop="opration" label="操作" width="220">
          <template slot-scope="scope">
            <div class="last">
              <el-button>
                <span @click="changePass(scope.row)">通过</span>
                <i>|</i>
              </el-button>
              <el-button>
                <span @click="changeStop(scope.row)">驳回</span>
                <i>|</i>
              </el-button>
              <el-button>
                <span @click="SelectOnly(scope.row)">编辑</span>
                <i>|</i>
              </el-button>
              <el-button>
                <span @click="Delete(scope.row)">删除</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalpage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索框
      input: "",
      // 下拉框
      options: [],
      value: "",
      //单选搜索
      radio1: "全部",
      // 页面数据
      tableData: [],
      // 分支企业数据
      selectData: [],
      num: 0,

      // 分页
      totalpage: 5, //总页数
      params: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        status: "",
      },

      // 批量通过/删除enterpriseId
      enterpriseId: [],
    };
  },
  methods: {
    // 初次渲染页面
    async BranchDynamics () {
      let {
        data: { totalpage, data, pagenum },
      } = await this.$http.getBranchDynamics(this.params);
      this.totalpage = totalpage;
      this.params.pagenum = pagenum;
      // 数字转换状态名
      data.reduce(function (m, n) {
        if (n.enterpriseStatus == 1) {
          n.enterpriseStatus = "已通过";
        } else if (n.enterpriseStatus == 2) {
          n.enterpriseStatus = "已驳回";
        } else {
          n.enterpriseStatus = "待审查";
        }
      }, 0);
      this.tableData = data;
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.BranchDynamics();
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.BranchDynamics();
    },
    // 搜索
    getSearch () {
      this.value = "";
      this.radio1 = "全部";
      this.params.pagenum = 1;
      this.BranchDynamics();
    },

    // 状态查询
    async changeState (status) {
      this.value = "";
      this.params.query = "";
      if (status == "已通过") {
        this.params.status = 1;
      } else if (status == "已驳回") {
        this.params.status = 2;
      } else if (status == "待审查") {
        this.params.status = 3;
      } else {
        this.BranchDynamics();
      }
      let {
        data: { data },
      } = await this.$http.getEnterpriseName({ status: this.params.status });

      data.reduce(function (m, n) {
        if (n.enterpriseStatus == 1) {
          n.enterpriseStatus = "已通过";
        } else if (n.enterpriseStatus == 2) {
          n.enterpriseStatus = "已驳回";
        } else {
          n.enterpriseStatus = "待审查";
        }
      }, 0);
      this.tableData = data;
    },
    // 分支企业搜索
    async Branch () {
      this.params.query = "";
      this.radio1 = "全部";
      if (this.num == 0) {
        let {
          data: { data },
        } = await this.$http.getBranchCompanys(this.params);
        this.selectData = data;
        this.num++;
      } else {
        let {
          data: { data },
        } = await this.$http.getBranchCompanys(this.params);
        data.reduce(function (m, n) {
          if (n.enterpriseStatus == 1) {
            n.enterpriseStatus = "已通过";
          } else if (n.enterpriseStatus == 2) {
            n.enterpriseStatus = "已驳回";
          } else {
            n.enterpriseStatus = "待审查";
          }
        }, 0);
        this.tableData = data.filter((item) => item.enterpriseId == this.value);

        this.num++;
      }
    },
    // 跳转添加页面
    getAdd () {
      this.$router.push({ path: "/branchdynamicsPop" });
    },
    // 删除数据
    async Delete (item) {
      let res = await this.$confirm("此操作将永久删除该用户, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => { }); // 这里的取消必须加上一个catch 的回调函数
      if (res != "confirm") return this.$message.info("取消删除");
      let {
        meta: { status, msg },
      } = await this.$http.getDeleteEnterprise(item.enterpriseId);

      if (status == 200) {
        this.$message.success("删除成功");
        this.BranchDynamics();
      } else {
        this.$message.error("删除失败");
      }
    },

    // 编辑企业动态
    async SelectOnly (item) {
      // 跳转编辑页面
      this.$router.push({ path: `/branchdynamicsEdit/${item.enterpriseId}` });
    },

    // 通过
    async changePass (item) {
      const flag = await this.$confirm('是否通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return this.$message('取消通过操作');
      let res = await this.$http.getUpdateStatusPass({
        enterpriseId: [item.enterpriseId],
      });
      if ((res = "selectAll")) {
        this.$message.success("修改成功");
        this.BranchDynamics();
      } else {
        this.$message.error("修改失败");
      }
    },
    // 驳回
    async changeStop (item) {
      const flag = await this.$confirm('是否驳回？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return this.$message('取消驳回操作');
      let res = await this.$http.getUpdateStatusTurn({
        enterpriseId: [item.enterpriseId],
      });
      if ((res = "selectAll")) {
        this.$message.success("修改成功");
        this.BranchDynamics();
      } else {
        this.$message.error("修改失败");
      }
    },

    // 批量通过
    async changeAllPass () {
      const flag = await this.$confirm('是否批量通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return this.$message('取消批量通过操作');
      if (this.enterpriseId.length == 0) {
        this.$message.info("请勾选操作项");
      } else {
        let res = await this.$http.getUpdateStatusPass({
          enterpriseId: this.enterpriseId,
        });
        if ((res = "selectAll")) {
          this.$message.success("修改成功");
          this.BranchDynamics();
        } else {
          this.$message.error("修改失败");
        }
        this.enterpriseId = [];
      }
    },
    // 批量驳回
    async changeAllStop () {
      const flag = await this.$confirm('是否批量驳回？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => { })
      if (!flag) return this.$message('取消批量驳回操作');
      if (this.enterpriseId.length == 0) {
        this.$message.info("请勾选操作项");
      } else {
        let res = await this.$http.getUpdateStatusTurn({
          enterpriseId: this.enterpriseId,
        });
        if ((res = "selectAll")) {
          this.$message.success("修改成功");
          this.BranchDynamics();
        } else {
          this.$message.error("修改失败");
        }
        console.log(1);
        this.enterpriseId = [];
      }
    },
    changeCheckBox (selection, row) {
      this.enterpriseId = selection.map((item) => item.enterpriseId);
    },

    // // 遍历状态
    // changeStatename(name){
    //   // 数字转换状态名
    //   name.reduce(function (m, n) {
    //     if (n.enterpriseStatus == 1) {
    //       n.enterpriseStatus = "已通过";
    //     } else if (n.enterpriseStatus == 2) {
    //       n.enterpriseStatus = "已驳回";
    //     } else {
    //       n.enterpriseStatus = "待审查";
    //     }
    //   }, 0);
    // },
    // 判断状态
    // judge(status) {
    //   if (status == "已通过") {
    //     this.params.status = 1;
    //   } else if (status == "已驳回") {
    //     this.params.status = 2;
    //   } else if (status == "待审查") {
    //     this.params.status = 3;
    //   } else {
    //     this.BranchDynamics();
    //   }
    // },
  },
  created () {
    this.BranchDynamics();
    this.Branch();
  },
};
</script>


<style scoped lang="less">
.el-main {
  min-height: 0;
}
.all {
  width: 100%;
  min-width: 1200px;
}
// Layout布局
.el-row {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  margin-left: 20px;
  /deep/ .el-input__inner {
    height: 32px;
  }
  /deep/ .el-radio-button__inner {
    padding: 6px 16px;
    height: 30px;
    margin: 0;
  }
}
.el-col:nth-child(1) {
  margin: 0;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-buttonght {
  background: #e5e9f2;
}
.grid-content {
  height: 32px;
  border-radius: 4px;
  display: flex;
  .button1 {
    font-size: 12px;
    color: #409eff;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  .button1:hover {
    color: #66b1ff;
  }
  .button2 {
    margin-left: 8px;
  }
  .button3 {
    width: 150px;
    height: 32px;
    font-size: 12px;
    padding: 0;
    margin-left: 10px;
    line-height: 24px;
    .add {
      font-size: 24px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.row-bg {
  padding: 0px 0;
  background-color: #f9fafc;
}
// 搜索框
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-radio-group {
  display: flex;
}

// 主要内容
.last {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  .el-button {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: transparent;
    background: transparent;
    color: transparent;
    color: #4091ff;
    i {
      font-size: 16px;
      color: #d7d7d7;
      margin: 0 5px;
    }
    span:hover {
      color: #66b1ff;
    }
  }
}

/deep/ .el-table__cell {
  height: 65px;
}
/deep/.cell {
  font-size: 12px;
}
// 分页
.paging {
  text-align: center;
  margin-top: 40px;
}
</style>